<template>
  <div>
    <el-card shadow="never" class="mb20 form-card">
      <el-form :model="form" ref="form" :inline="true" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item class="area-item" :label="row.planType === 1 ? '区域' : '部门'">
              <area-select
                v-if="row.planType === 1"
                :selectValue="form.areaId"
                ref="areaSelect"
                @select="value => handleSelect('areaId', value)"
                v-model="form.areaId"
              />
              <dept-select
                v-if="row.planType === 2"
                :selectValue="form.useDeptId"
                ref="deptSelect"
                @select="value => handleSelect('useDeptId', value)"
                v-model="form.useDeptId"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="type-item" label="资产类别">
              <type-select
                :selectValue="form.categoryId"
                ref="typeSelect"
                @select="value => handleSelect('categoryId', value)"
                v-model="form.categoryId"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="盘点方式">
              <el-select clearable v-model="form.checkType">
                <el-option :value="1" label="手工盘点" />
                <el-option :value="2" label="RFID扫描" />
                <el-option :value="3" label="二维码扫描" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button @click="handleSearch" type="primary">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <div class="mb20" style="text-align: right" v-show="name !== 'have'">
        <el-button type="primary" @click="handleAccess('0')">审核通过</el-button>
        <el-button type="danger" @click="handleAccess('1')">审核不通过</el-button>
      </div>
      <e-table
        ref="eTable"
        @tableCheck="handleTableCheck"
        @getList="handleGetList"
        :tableData="tableData"
        :columns="columns"
        :loading="loading"
        :total="total"
      >
        <el-table-column slot="selection" align="center" type="selection" width="55" />
        <el-table-column
          slot="name"
          show-overflow-tooltip
          :label="row.planType === 1 ? '区域名称' : '部门名称'"
          align="center"
          width="150px"
        >
          <span
            slot-scope="scope"
          >{{ row.planType === 1 ? scope.row.areaName : scope.row.deptName }}</span>
        </el-table-column>
        <el-table-column
          slot="assetsName"
          show-overflow-tooltip
          label="资产名称"
          align="center"
          width="220px"
        >
          <span slot-scope="scope">{{ scope.row.assetsName }}</span>
        </el-table-column>
        <el-table-column
          slot="state"
          show-overflow-tooltip
          label="资产状态"
          align="center"
          width="80px"
        >
          <template slot-scope="scope">
            <el-tag :type="stateType(scope.row.assetsState)">{{ stateWord(scope.row.assetsState) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          slot="checkState"
          show-overflow-tooltip
          label="盘点状态"
          align="center"
          width="80px"
        >
          <template slot-scope="scope">
            <el-tag
              :type="stateType(scope.row.checkState + '')"
            >{{ stateWord(scope.row.checkState + '') }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column slot="picture" show-overflow-tooltip label="图片" align="center" width="60">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.pictureUrl"
              @click="handlePreview( scope.row )"
            >{{ scope.row.pictureUrl.length }}张</el-button>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          slot="checkTime"
          show-overflow-tooltip
          label="盘点时间"
          align="center"
          width="150px"
        >
          <span
            slot-scope="scope"
          >{{ scope.row.checkTime ? formatTime(scope.row.checkTime) : null }}</span>
        </el-table-column>
        <!-- 已审核显示审核时间，这个判断显示存在问题 -->
        <el-table-column
          v-if="name === 'have'"
          slot="reviewTime"
          show-overflow-tooltip
          label="审核时间"
          align="center"
          width="150px"
        >
          <span
            slot-scope="scope"
          >{{ scope.row.reviewTime ? formatTime(scope.row.reviewTime) : null }}</span>
        </el-table-column>
        <el-table-column
          slot="checkType"
          show-overflow-tooltip
          label="盘点方式"
          align="center"
          width="120px"
        >
          <span
            slot-scope="scope"
          >{{ scope.row.checkType === 1 ? '手工盘点' : ( scope.row.checkType === 2 ? 'RFID扫描' : '二维码扫描' ) }}</span>
        </el-table-column>
      </e-table>
    </el-card>
  </div>
</template>

<script>
import TypeSelect from '../components/TypeSelect'
import AreaSelect from '../components/AreaSelect'
import DeptSelect from '../components/DeptSelect'
import { normalUnaudited, changeUnaudited, haveAudited, auditDetailCheck } from '@/api/assetsNew'
import { getSession, stateType, stateWord, openNotification } from '@/utils/util'

export default {
  components: {
    TypeSelect,
    AreaSelect,
    DeptSelect
  },
  data() {
    return {
      fixWidth: {
        width: '100%'
      },
      form: {
        areaId: null,
        useDeptId: null,
        checkType: null,
        categoryId: null
      },
      tableData: [],
      total: 1,
      loading: false,
      columns: [
        { slot: 'selection' },
        { slot: 'name' },
        { slot: 'assetsName' },
        { slot: 'state' },
        { slot: 'checkState' },
        { slot: 'checkType' },
        { slot: 'picture' },
        {
          label: '盘点描述',
          width: '200px',
          prop: 'checkDescribe'
        },
        {
          label: '盘点人',
          prop: 'checkUser'
        },
        { slot: 'checkTime' }
      ],
      queryParam: {
        pageSize: 10,
        pageNo: 1
      },
      name: null,
      selectedRows: [],
      row: this.$route.params.obj || getSession('auditDetailRow')
    }
  },
  methods: {
    handleReset() {
      this.row.planType === 1 ? this.$refs.areaSelect.reset() : this.$refs.deptSelet.reset()
      this.$refs.typeSelect.reset()
      for (const key in this.form) {
        if (this.form.hasOwnProperty(key)) {
          this.$set(this.form, 'key', null)
        }
      }
    },
    // 预览
    handlePreview(row) {
      let arr = []
      row.pictureUrl.map(v => {
        arr.push(v.url)
      })
      this.$refs.previewModal.show(arr)
    },
    handleTableCheck(arr) {
      this.selectedRows = arr
    },
    // 审核通过
    async handleAccess(checkFlag) {
      let arr = []
      this.selectedRows.map(v => {
        arr.push(v.assetsId)
      })
      let param = { planId: this.row.planId, assetsIds: arr, checkFlag }
      const res = await auditDetailCheck(param)
      if (res.state === '000000') {
        if (checkFlag === '0') {
          openNotification('success', '审核通过成功')
        } else {
          openNotification('success', '审核不通过成功')
        }
        this.setName(this.name)
      }
    },
    stateWord(num) {
      return stateWord(num)
    },
    stateType(num) {
      return stateType(num)
    },
    async setName(name) {
      console.log('name', name)

      this.name = name
      // let res = ''
      let param = { planId: this.row.planId, ...this.form }
      this.handleGetList(param)
    },
    handleSelect(key, value) {
      this.$set(this.form, key, value.key)
    },
    handleSearch() {
      this.setName(this.name)
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      let res = ''
      if (this.name === 'normal') {
        res = await normalUnaudited(this.queryParam)
      } else if (this.name === 'change') {
        res = await changeUnaudited(this.queryParam)
      } else {
        res = await haveAudited(this.queryParam)
      }
      // const res = await infoAll(this.queryParam)
      if (res && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    }
  }
}
</script>

<style scoped>
.form-card {
  overflow: inherit;
}
.form-card >>> .el-card__body .el-form-item {
  display: flex;
  margin-bottom: 0;
}
.form-card >>> .el-card__body .type-item .el-form-item__content,
.area-item >>> .el-form-item__content {
  width: 100%;
}
</style>